<template>
  <div>
    <div class="box">
      <h1>校内信息发布系统</h1>
      <div class="demo-input-suffix">
        <!--用户名输入框 -->
        <el-input
          clearable
          class="input1"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          v-model="name"
        >
        </el-input>
        <!--密码输入框 -->
        <el-input
          class="input2"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          show-password
          v-model="pwd"
        >
        </el-input>
        <button class="btn" @click="login">登 录</button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  data() {
    return {
      name: "", //用户名
      pwd: "", //密码
    };
  },
  methods: {
    login() {
      // 如果没有输入用户名或密码 提示输入正确的用户名和密码
      if (this.name == "" || this.pwd == "") {
        this.$alert("请输入正确的用户名和密码", "提示", {
          confirmButtonText: "确定",
        });
        // 终止后面的程序运行
        return 
      }
      // 发送登录请求
      let params = `name=${this.name}&pwd=${this.pwd}`;
      // 查看请求参数
      // console.log(params);
      // 因为在main.js中设置了请求基本路径,所以现在不用写请求路径前缀
      this.axios.post("admin/login", params).then((res) => {
        // 打印查看登录结果
        // console.log(result);
        if (res.data.code == 200) {
          alert("登录成功,点击确定跳转到主页");
          this.$router.push("/home");
        } else {
          this.$alert("登陆失败,请输入正确的用户名和密码", "提示", {
            confirmButtonText: "确定",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 30%;
  margin: 200px auto;
  height: 300px;
  border: 1px solid rgb(161, 156, 156);
  border-radius: 15px;

  .input1 {
    width: 70%;
    margin: 0 auto 30px;
  }
  .input2 {
    width: 70%;
    margin: 0 auto 30px;
  }
  .btn {
    width: 70%;
    height: 30px;
    background-color: #ededed;
    border: 1px solid #52a7ff;
    border-radius: 10px;
  }
}
</style>
